<!-- 表单组件 el-form-->
<template>
	<el-form
		ref="formRef"
		:size="size"
		:model="model"
		:rules="rules"
		:label-width="labelWidth"
		:disabled="disabled"
		:show-message="showMessage"
		:hide-required-asterisk="hideRequiredAsterisk"
		@validate="validateEmit"
		@submit.native.prevent
	>
		<el-row :gutter="35">
			<slot />
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
interface Props {
	hideRequiredAsterisk?: boolean;
	model?: object;
	size?: string;
	rules?: object;
	disabled?: boolean;
	showMessage?: boolean;
	labelWidth?: string;
}

const props = withDefaults(defineProps<Props>(), {
	hideRequiredAsterisk: false,
	size: 'default',
	disabled: false,
	showMessage: true,
	labelWidth: '90px',
});

const formRef = ref();

const emit = defineEmits<{
	(e: 'validate', argument: any): void;
}>();

const validate = () => {
	return formRef.value.validate();
};

// 对部分表单字段进行校验的方法
const validateField = () => {
	return formRef.value.validateField;
};
const resetFields = () => {
	return formRef.value.resetFields();
};
const clearValidate = (prop: any) => {
	if (prop) {
		formRef.value.clearValidate(prop);
	} else {
		formRef.value.clearValidate();
	}
};

const validateEmit = (argument: any) => {
	emit('validate', argument);
};
 
// 暴露变量
defineExpose({
	validate,
	validateField,
	resetFields,
	clearValidate,
});
</script>

<style lang="scss" scoped></style>
